<template>
  <page-header-wrapper>
    <!-- 代理 -->
    <listModule ref="listModule" :showAction="false" :params="queryParam" @handle="handle"></listModule>
    <formModule
      ref="formModule"
      :params="{
        type: 0,
      }"
      :showSupplier="false"
      :address="true"
      @callback="search"
    ></formModule>
  </page-header-wrapper>
</template>

<script>
import listModule from './components/bindDepotList'
import formModule from './components/addBindDepot'

export default {
  components: {
    listModule,
    formModule,
  },

  data() {
    return {
      queryParam: {
        supplier_name: '',
        supplier_phone: '',
        front_agent_admin_name: '',
        type: '0',
      },
    }
  },

  created() {
    this.search()
  },

  methods: {
    search() {
      this.$nextTick(() => {
        this.$refs.listModule.tablePageChange(1)
      })
    },

    handle(type, item) {
      switch (type) {
        case 'add':
          this.openEditPop()
          break

        case 'edit':
          this.openEditPop({
            id: item.id,
            front_agent_admin_id: item.front_agent_admin_id,
            supplier_id: item.supplier_info.id,
          })

          let el = this.$refs.formModule
          el.front_agent_admin_name = item.front_agent.name
          el.supplier_name = item.supplier_info.name
          break
      }
    },

    openEditPop(params) {
      this.$refs.formModule.open(params)
    },
  },
}
</script>
<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    margin-top: 11px;
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
  .ant-btn {
    margin-top: 11px;
  }
}

.flex {
  .inp {
    margin-right: 16px;
  }
}
</style>
